<script>
import Moveable from "vue3-moveable";
import { ref } from "vue";

export default {
  components: { Moveable },
  setup() {
    const warpable = true;
    const renderDirections = ["nw", "n", "ne", "w", "e", "sw", "s", "se"];
    const targetRef = ref(null);
    const onWarp = (e) => {
      e.target.style.transform = e.transform;
    };
    return { targetRef, warpable, renderDirections, onWarp };
  },
};
</script>
<template>
  <div class="root">
    <div class="container">
      <div class="target" ref="targetRef">Target</div>
      <Moveable
        :target="targetRef"
        :warpable="warpable"
        :renderDirections="renderDirections"
        @warp="onWarp"
      />
    </div>
  </div>
</template>